<template>
	<view class="pagesbg">
		<uni-popup ref="logoutPopup" type="center" :animation="true" @change="changePopup($event,'logoutPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">确定退出登录吗？</view>
							<view class="psdBox-input--1"></view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('logoutPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="confirm()">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头像 -->
		<uni-popup ref="avatarPopup" type="center" :animation="true" @change="changePopup($event,'avatarPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-bgBox">
							<view class="close" @tap.stop="hidePopup('avatarPopup')"></view>
							<view class="psdBox-imgBox">
								<image :src="userInfo.avatar ? userInfo.avatar : avatar" mode="widthFix"></image>
							</view>
							<view class="close" @tap.stop="hidePopup('avatarPopup')"></view>
							<view class="psdBox-btn" @tap.stop="$u.throttle(submit,1000)">更换头像</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 昵称 -->
		<uni-popup ref="namePopup" type="center" :animation="true" @change="changePopup($event,'namePopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">修改昵称</view>
							<view class="psdBox-input">
								<input type="text" v-model="name" placeholder="请输入修改的昵称名" placeholder-class="inputStyle"
								:maxlength="maxName">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('namePopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(nameSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.switchTab('/pages/user/user')"></view>
				<view class="header-title">设置</view>
			</view> 
		</view> 
		<!-- 主体 -->
		<view class="setList">
			<view class="setList-wrapper">
				<view class="setList-item setList-item--1" @tap.stop="openPopup('avatarPopup')">
					<view class="setList-item__name">头像</view>
					<view class="setList-item__right">
						<image class="tou" :src="userInfo.avatar ? imgShow(userInfo.avatar) : avatar" mode="aspectFill"></image>
						<image class="next" src="@/static/user/sel.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="setList-item" @tap.stop="openPopup('namePopup')">
					<view class="setList-item__name">昵称</view>
					<view class="setList-item__right">
						<view class="name" v-if="userInfo.nickName">{{ userInfo.nickName }}</view>
						<view class="name" v-else>暂无~</view>
						<image class="next" src="@/static/user/sel.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="setList-item" @tap.stop="$tools.jump('./payment')">
					<view class="setList-item__name">绑定收款方式</view>
					<view class="setList-item__right">
						<view class="name name--active">去绑定</view>
						<image class="next" src="@/static/user/sel.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!--<view class="setList-wrapper">
				 <view class="setList-item" @tap.stop="$tools.jump('./editPsd')">
					<view class="setList-item__name">登录密码</view>
					<view class="setList-item__right">
						<image class="next" src="@/static/user/sel.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="setList-item" @tap.stop="$tools.jump('./editPayPsd',userInfo.isPayPwd)">
					<view class="setList-item__name">交易密码</view>
					<view class="setList-item__right">
						<image class="next" src="@/static/user/sel.png" mode="widthFix"></image>
					</view>
				</view> 
			</view>-->
			<view class="bottom">
				<view class="logout" @tap="logout()">退出登录</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import url from '@/common/js/url.js';
	export default {
		components:{
		},
		data(){
			return{
				qiniu: {},
				userInfo: {},
				name: '',
				avatar: '../../static/pack/logo.png',
				toggle: true,
			}
		},
		computed: {
			maxName(){
				console.log(typeof(this.name));
				// typeof(this.name) == 'string'
				if(this.$u.test.digits(this.name)){
					return 50;
				}else{
					return 7;
				}
			}
		},
		onLoad() {
		},
		onShow() {
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				this.getUserInfo();
				// this.getQiNiuToken();
			},
			// 修改头像
			submit(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						// let avatar = res.tempFilePaths[0];
						let avatar = res.tempFiles[0];
						console.log("avatar:",avatar)
						let now_time = new Date().getTime();
						uni.showLoading({
							mask: true
						})
						uni.uploadFile({
							url: url.webUrl+'/api/common/upload', 
							// filePath: avatar,
							file: avatar,
							name: 'file',
							formData: {
								'key': now_time,
							},
							success: (uploadFileRes) => {
									let res = JSON.parse(uploadFileRes.data);
									// let backUrl = this.qiniu.domain + '/' +uploadImgUrl;
									// this.avatar = backUrl;
								console.log(res)
								if(res.code == 200){
									this.avatar = res.data.fileName
									if(this.avatar){
										this.avatarSubmit();
									}
								}
								uni.hideLoading();
							},
							fail: (error) => {
								console.log(error);
								uni.hideLoading();
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});
					},
					fail: function() {
						console.log('上传图片接口调用失败');
						return;
					}
				});
			},
			// 修改头像
			avatarSubmit(){
				var data = {};
				data['avatar'] = this.avatar;
				console.log("data：",data);
				this.$Ajax('/api/user/updUserInfo',
				data,
				res => {
						this.$tools.toast('修改头像成功');
						this.hidePopup('avatarPopup');
						this.getUserInfo();
					}, err =>{
						
					}
				)
			},
			// 修改昵称
			nameSubmit(){
				if(!this.name){
					return this.$tools.toast('请输入修改的昵称名');
				}
				if (this.name.length > 10 ) {
					return this.$tools.toast('用户昵称最多10位');
				}
				// if(this.name.length > 7){
				// 	return this.$tools.toast('最多可输入五个文字');
				// }
				var data = {};
				data['nickName'] = this.name;
				console.log("data：",data);
				this.$Ajax('/api/user/updUserInfo',
				data,
				res => {
						this.$tools.toast('修改昵称成功');
						this.hidePopup('namePopup');
						this.name = '';
						this.getUserInfo();
					}, err =>{
						
					}
				)
			},
			confirm(){
				let that = this;
				if(this.toggle){
					this.toggle = false;
					var data = {
						// userId: this.user.userId,
					};
					that.$Ajax('/api/user/logout',data,res => {
						 
						},err =>{
							console.log("shibai");
							this.toggle = true;
						}, 'GET'
					)
					that.$tools.toast('退出登录成功');
					uni.removeStorageSync('user');
					uni.removeStorageSync('token');
					uni.removeStorageSync('address_id');
					setTimeout(function() {
						that.$tools.reLaunch('/pages/operate/login');
					}, 500)
				}
			},
			// 退出登录
			logout(){
				this.openPopup('logoutPopup');
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setList{
		&-wrapper{
			background: #FFFFFF;
			margin: 12rpx 0 0;
			padding: 16rpx 0;
		}
		&-item{
			@include flexBetween;
			padding: 36rpx 0;
			margin: 0 50rpx;
			border-bottom: 1px solid #E9EAF0;
			&:nth-last-child(1){
				border-bottom: none;
			}
			&--1{
				padding: 16rpx 0 6rpx;
			}
			&__name{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131414;
			}
			&__right{
				@include flexRight;
				.name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #131414;
					&--active{
						color: #FA6A45;
					}
				}
				.tou{
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
				.next{
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.psdBox{
		position: relative;
		.close{
			width: 100vw;
			height: 300rpx;
		}
		&-bgBox{
			background: rgba(0,0,0,0.9);
			width: 100vw;
			height: 100vh;
		}
		&-imgBox{
			image{
				width: 100%;
				height: 100%;
				// border-radius: 50%;
			}
		}
		&-btn{
			// background: rgba(255,255,255,0.2);
			background: rgba(0, 0, 0, 0.4);
			border-radius: 136rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			margin: auto;
			width: 30%;
			padding: 20rpx 44rpx;
			position: fixed;
			bottom: 178rpx;
			left: 0;right: 0;
		}
	}
	
	.initBtn{
		width: 95%;
		margin: auto;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 0;
		background: #fff;
		text-align: center;
	}
	.btn{
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
	}
	.logout{
		width: 93.6%;
		margin: auto;
		margin-top: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
		border-radius: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}
	
</style>